<!DOCTYPE html>
<html>
<head>
    <title>Personal homepage</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Free singlepage web template created by GraphBerry">
    <meta name="keywords" content="HTML5, Bootstrap 3, CSS3, javascript, PHP, Responsive, Mobile">
    <meta name="author" content="GraphBerry.com"/>
    <!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- Fonts -->
	<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400" rel="stylesheet">
    <!-- Styles -->
	<link rel="stylesheet" type="text/css" href="css/yellowmoon-font.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

	<header id="header">
		
		<!-- Section title -->
		<h1 class="sr-only">YellowMoon | Home page</h1>

	</header>

	<main>
		
		<section id="home" class="home">

			<!-- Section title -->
			<h2 class="sr-only">Home</h2>

			<div class="l-align-both">
	
				<figure class="logo">
					<img src="img/logo/yellowmoon_logo_01.svg" title="YellowMoon Logo" alt="Cartoon illustration of the moon">
					<figcaption class="sr-only">YellowMoon Logo</figcaption>
				</figure>

				<span class="h3 -white">Welcome to my homepage</span>

				<span class="h1 -yellow">We do some creative stuff!!!</span>

				<a href="javascript:void(0)" class="button">See</a>

				<a href="#about" class="chevron-down smoothScroll">
					<img class="icon" src="img/chevron_down_white.svg" title="Scroll down" alt="Chevron pointing downwards">


					<span class="sr-only">Scroll down</span>
				</a>

			</div>

		</section> <!-- /.home -->

		<div class="nav-container">

			<nav id="main-navigation" class="navbar navbar-default">
			  <!-- Section title -->
			  <h2 class="sr-only">Main navigation</h2>

			  <div class="container">
			    <div class="navbar-header">
			      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navbar" aria-expanded="false">
			        <span class="icon-bar"></span>
			        <span class="icon-bar"></span>
			        <span class="icon-bar"></span>
			        <span class="sr-only">Toggle navigation</span>
			      </button>
			      <a class="navbar-brand smoothScroll" href="#home">
			        <img class="logo" src="img/logo/yellowmoon_logo_02.svg" title="YellowMoon Logo" alt="Cartoon illustration of the moon and brand title">
			        <span class="sr-only">YellowMoon Logo</span>
			      </a>
			    </div>

			    <div id="main-navbar" class="collapse navbar-collapse">
				  
					<ul class="nav navbar-nav navbar-right">
						<li class="active"><a class="smoothScroll" href="#home">Home <span class="sr-only">(current)</span></a></li>
						<li><a class="smoothScroll" href="#about">About me</a></li>
						<li><a class="smoothScroll" href="#portfolio">Portfolio</a></li>
						<li><a class="smoothScroll" href="#contact">Contact</a></li>
					</ul>

			    </div> <!-- /.navbar-collapse -->

			  </div> <!-- /.container -->

			</nav> <!-- /.navbar -->

		</div> <!-- /.nav-container -->

		<section id="about" class="about">

			<div class="container">

				<div class="row">

					<div class="col-md-8 col-md-offset-2">

						<!-- Section title -->
						<h2 class="title -black">About me</h2>

						<!-- <span class="subtitle h3 -yellow"></span> -->

					</div>

				</div> <!-- /.row -->
				
				<div class="row box-container">
					
					<div class="col-sm-4">
						
						<div class="about-box">
							
							<h3 class="title -one -black">家乡</h3>

							<p class="desc">河北吴桥</p>

						</div> <!-- /.about-box -->

					</div>郝泓达

					<div class="col-sm-4">
						
						<div class="about-box">
							<h3 class="title -one -black">人生格言</h3>

							<p class="desc">路虽远，行则将至！</p>
							

						</div> <!-- /.about-box -->

					</div>

					<div class="col-sm-4">
						
						<div class="about-box">
							
							<h3 class="title -two -black">兴趣爱好</h3>

							<p class="desc">听歌，打羽毛球，追剧，一切可以偷懒的运动</p>

						</div> <!-- /.about-box -->

					</div>

				</div> <!-- /.row -->

			</div> <!-- /.box-container -->

		</section> <!-- /.about -->

		<section id="quote" class="quote">

			<!-- Section title -->
			<h2 class="sr-only">Quote</h2>

			<div class="container">
				
				<div class="row">
					
					<div class="col-md-6 col-md-offset-3">
						
						<span class="h2 -black text-center">What I learned was WEB 前端</span>

						<span class="h3 -white text-center">html,css,bootstrip,javascript,java,vue,</span>

					</div>

				</div> <!-- /.row -->

			</div> <!-- /.container -->
			
		</section> <!-- /.quote -->

		<section id="portfolio" class="portfolio">

			<div class="container">

				<div class="row">

					<div class="col-md-8 col-md-offset-2">
			
						<!-- Section title -->
						<h2 class="title -black">Project case</h2>


					</div>

				</div> <!-- /.row -->

				<div class="row box-container">
					
					<div class="col-xxs-12 col-xs-6 col-md-3">
						
						<div class="portfolio-item">

							<img src="img/portfolio/portfolio_01.jpg" title="Portfolio image one title" alt="Portfolio image one description">

							<div class="overlay">
								<div class="content">
									<a href="http://sf0916.gitee.io/todo_list/">
										<span class="h2 -black text-center">待办事项</span>
									</a>
									
								</div>
							</div> <!-- /.overlay -->
							
						</div> <!-- /.portfolio-item -->

					</div>

					<div class="col-xxs-12 col-xs-6 col-md-3">
						
						<div class="portfolio-item">

							<img src="img/portfolio/portfolio_02.jpg" title="Portfolio image two title" alt="Portfolio image two description">

							<div class="overlay">
								<div class="content">
									<a href="http://sf0916.gitee.io/jingdong_shopping_cart/"><span class="h2 -black text-center">京东购物车
									</span></a>
									
								</div>
							</div> <!-- /.overlay -->
							
						</div> <!-- /.portfolio-item -->

					</div>

					<div class="col-xxs-12 col-xs-6 col-md-3">
						
						<div class="portfolio-item">

							<img src="img/portfolio/portfolio_03.jpg" title="Portfolio image three title" alt="Portfolio image three description">

							<div class="overlay">
								<div class="content">
									<a href="http://sf0916.gitee.io/translate/"><span class="h2 -black text-center">中英互译</span></a>
								</div>
							</div> <!-- /.overlay -->
							
						</div> <!-- /.portfolio-item -->

					</div>

					<div class="col-xxs-12 col-xs-6 col-md-3">
						
						<div class="portfolio-item">

							<img src="img/portfolio/portfolio_04.jpg" title="Portfolio image four title" alt="Portfolio image four description">

							<div class="overlay">
								<div class="content">
									<a href="http://sf0916.gitee.io/calendar/
									"><span class="h2 -black text-center">js日历</span></a>
								</div>
							</div> <!-- /.overlay -->
							
						</div> <!-- /.portfolio-item -->

					</div>

				</div> <!-- /.row -->

				<div class="row">
					
					<div class="col-xxs-12 col-xs-6 col-md-3">
						
						<div class="portfolio-item">

							<img src="img/portfolio/portfolio_05.jpg" title="Portfolio image five title" alt="Portfolio image five description">

							<div class="overlay">
								<div class="content">
									<a href="http://sf0916.gitee.io/tiandao/"><span class="h2 -black text-center">天涯明月刀</span></a>
								</div>
							</div> <!-- /.overlay -->
							
						</div> <!-- /.portfolio-item -->

					</div>

					<div class="col-xxs-12 col-xs-6 col-md-3">
						
						<div class="portfolio-item">

							<img src="img/portfolio/portfolio_06.jpg" title="Portfolio image six title" alt="Portfolio image six description">

							<div class="overlay">
								<div class="content">
									<a href="http://sf0916.gitee.io/yun_ba/"><span class="h2 -black text-center">云巴网站</span></a>
								</div>
							</div> <!-- /.overlay -->
							
						</div> <!-- /.portfolio-item -->

					</div>

					<div class="col-xxs-12 col-xs-6 col-md-3">
						
						<div class="portfolio-item">

							<img src="img/portfolio/portfolio_07.jpg" title="Portfolio image seven title" alt="Portfolio image seven description">

							<div class="overlay">
								<div class="content">
									<a href="http://sf0916.gitee.io/repute/"><span class="h2 -black text-center">Repute</span></a>
								</div>
							</div> <!-- /.overlay -->
							
						</div> <!-- /.portfolio-item -->

					</div>

					<div class="col-xxs-12 col-xs-6 col-md-3">
						
						<div class="portfolio-item">

							<img src="img/portfolio/portfolio_08.jpg" title="Portfolio image eight title" alt="Portfolio image eight description">

							<div class="overlay">
								<div class="content">
									<a href="http://sf0916.gitee.io/man_wei/"><span class="h2 -black text-center">漫威</span></a>
								</div>
							</div> <!-- /.overlay -->
							
						</div> <!-- /.portfolio-item -->

					</div>

				</div> <!-- /.row -->

			</div> <!-- /.container -->

			<p class="load-more -yellow text-center">Oh...We have more of these</p>

			<a href="javascript:void(0)" class="chevron-down">
				<img class="icon" src="img/chevron_down_black.svg" title="Load more..." alt="Chevron pointing downwards">
				<span class="sr-only">Load more...</span>
			</a>

		</section> 

		<!-- <section id="clients" class="clients">

			<div class="container">

				<div class="row">

					<div class="col-md-8 col-md-offset-2">
						<h2 class="title -white">Clients</h2>

						<span class="subtitle h3 -yellow">Somebody actually pay us for these stuff</span>

					</div>

				</div>

				<div class="row box-container">
					
					<div class="col-xs-6 col-sm-4 col-md-2">
						
						<div class="logo-box">
							
							<a href="javascript:void(0)">
								<img class="client-logo" src="img/clients/logo_01.svg" title="Client logo one title" alt="Client logo one description">
							</a>

						</div>

					</div>

					<div class="col-xs-6 col-sm-4 col-md-2">
						
						<div class="logo-box">
							
							<a href="javascript:void(0)">
								<img class="client-logo" src="img/clients/logo_02.svg" title="Client logo two title" alt="Client logo two description">
							</a>

						</div> 

					</div>

					<div class="col-xs-6 col-sm-4 col-md-2">
						
						<div class="logo-box">
							
							<a href="javascript:void(0)">
								<img class="client-logo" src="img/clients/logo_03.svg" title="Client logo three title" alt="Client logo three description">
							</a>

						</div> 
					</div>

					<div class="col-xs-6 col-sm-4 col-md-2">
						
						<div class="logo-box">
							
							<a href="javascript:void(0)">
								<img class="client-logo" src="img/clients/logo_04.svg" title="Client logo four title" alt="Client logo four description">
							</a>

						</div>

					</div>

					<div class="col-xs-6 col-sm-4 col-md-2">
						
						<div class="logo-box">
							
							<a href="javascript:void(0)">
								<img class="client-logo" src="img/clients/logo_05.svg" title="Client logo five title" alt="Client logo five description">
							</a>

						</div> 

					</div>

					<div class="col-xs-6 col-sm-4 col-md-2">
						
						<div class="logo-box">
							
							<a href="javascript:void(0)">
								<img class="client-logo" src="img/clients/logo_06.svg" title="Client logo six title" alt="Client logo six description">
							</a>

						</div> 

					</div>

				</div> 

			</div> 

		</section> 
 -->
		<section id="contact" class="contact">

			<div class="container">
			
				<div class="row">

					<div class="col-md-8 col-md-offset-2">

						<!-- Section title -->
						<h2 class="title -black">Contact us</h2>

						<span class="subtitle h3 -yellow">Sure...We can take some time for chat</span>

					</div>

				</div> <!-- /.row -->

				<div class="row box-container">

					<div class="col-md-10 col-md-offset-1">
						
						<form class="contact-form">

							<div class="container-fluid">
						
								<div class="row">

									<div class="col-sm-6">
										
										<label class="sr-only" for="Name">Name</label>
										<input type="text" name="name" id="Name" class="name" placeholder="Name" required>

									</div>
									
									<div class="col-sm-6">
										
										<label class="sr-only" for="Email">Email</label>
										<input type="email" name="email" id="Email" class="email" placeholder="Mail" required>

									</div>

								</div> <!-- /.row -->

								<div class="row">
									
									<div class="col-sm-12">
										
										<label class="sr-only" for="Subject">Subject</label>
										<input type="text" name="subject" id="Subject" class="subject" placeholder="Subject" required>

									</div>

								</div> <!-- /.row -->

								<div class="row">

									<div class="col-sm-12">
										
										<label class="sr-only" for="Message">Message</label>
										<textarea name="message" id="Message" class="message" rows="7" placeholder="Message" required></textarea>

									</div>
									
								</div> <!-- /.row -->

								<div class="row">

									<div class="col-sm-12">

										<button type="submit" class="btn btn-submit">Send</button>

									</div>

								</div> <!-- /.row -->

							</div> <!-- /.container -->

						</form>	<!-- /.contact-form -->

					</div>
					
				</div> <!-- /.row -->

			</div> <!-- /.container -->

		</section> <!-- /.contact -->

	</main>

	<footer id="footer" class="footer">
		<!-- Section title -->
		<h2 class="sr-only">Footer</h2>
		
		<div class="container">
			
			<div class="row">
				
				<div class="col-sm-6">
					<small class="copyright -yellow"> © <span id="year">2019</span> -  Song Fang's personal homepage </small>
				</div>

				<div class="col-sm-6">
					<ul class="social-list">
						<li><a href="javascript:void(0)"><span class="icon icon-facebook" aria-hidden="true"></span></a></li>
						<li><a href="javascript:void(0)"><span class="icon icon-twitter" aria-hidden="true"></span></a></li>
						<li><a href="javascript:void(0)"><span class="icon icon-dribbble" aria-hidden="true"></span></a></li>
						<li><a href="javascript:void(0)"><span class="icon icon-google" aria-hidden="true"></span></a></li>
						<li><a href="javascript:void(0)"><span class="icon icon-youtube" aria-hidden="true"></span></a></li>
					</ul>
				</div>

			</div> <!-- /.row -->

		</div> <!-- /.container -->

	</footer>	

	<!-- Scripts -->
	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="js/libs/smooth-scroll.min.js"></script>
	<script type="text/javascript" src="js/libs/modernizr.mq.js"></script>

	<!-- Latest compiled and minified JavaScript Bootstrap-->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

	<!-- Custom JS -->
	<script type="text/javascript" src="js/custom.js"></script>

</body>
</html>